<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <Echart
      id="rightTop"
      :options="option"
      class="right_top_inner"
      v-if="pageflag"
      ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from "api/modules";
export default {
  // props: ['markerData'], // 接收外部传入的 markerData
  props: {
    markerData: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    markerData: {
      handler(newVal) {
        if (newVal && newVal.history) {
          this.updateChartData(newVal.history);
        }
      },
      deep: true
    }
  },
  data() {
    return {
      option: {},//用于配置Echarts图表的选项
      pageflag: false,//用于控制图标是否显示
      timer: null,//是一个定时器的引用，用于定时获取数据。
      showChart: false, // 控制折线图的显示和隐藏
    };
  },

  created() {//是一个生命周期钩子函数

  },

  mounted() {//是一个生命周期钩子函数
    this.getData();//用于获取数据
  },
  beforeDestroy() {//是一个生命周期钩子函数
    this.clearData();//用于清楚数据或取消定时器登操作
  },
  methods: {
    toggleChart() {
      this.showChart = !this.showChart;//用于切换折线图的显示和隐藏
    },
    clearData() {
      if (this.timer) {//如果this.timer存在，则清除定时器并将this.timer设置为null。
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    updateChartData(history){
      const xData = history.map(item => item.time); // 提取时间作为 X 轴数据
      const yData = history.map(item => parseFloat(item.water.replace('m', ''))); // 提取水位值作为 Y 轴数据，假设水位值后面有 'm'

      this.init(xData, yData);
      this.pageflag = true;
    },
    getData() {
      this.pageflag = true;//设置为true表示正在加载数据
      // this.pageflag =false
      currentGET("big4").then((res) => {//发送get请求
        if (!this.timer) {
          console.log("近期水位变化", res);
        }
        if (res.success) {
          this.countUserNumData = res.data;//将获取到的数据赋值给this.countUserNumData
          this.$nextTick(() => {
            this.init(res.data.dateList, res.data.numList);
            // this.switper();
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init(xData, yData) {
  // 计算 y 轴的范围
  const yMin = Math.min(...yData); // 获取 yData 中的最小值
  const yMax = Math.max(...yData); // 获取 yData 中的最大值

  // 设置 y 轴的范围
  const yAxisMin = Math.floor(yMin * 0.9); // 稍微减少一些下限（乘以 0.9 并向下取整）
  const yAxisMax = Math.ceil(yMax * 1.1);  // 稍微增加一些上限（乘以 1.1 并向上取整）

  this.option = {
    xAxis: {
      type: "category",
      data: xData,
      name: "heng",
      boundaryGap: true,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        interval: 0,
        rotate: 45,
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    yAxis: {
      min: yAxisMin, // 动态设置 y 轴的最小值
      max: yAxisMax, // 动态设置 y 轴的最大值
      type: "value",
      name: "水位（m）",
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(31,99,163,.2)",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(31,99,163,.1)",
        },
      },
      axisLabel: {
        color: "#7EB7FD",
        fontWeight: "500",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    grid: {
      show: true,
      left: "10px",
      right: "30px",
      bottom: "10px",
      top: "28px",
      containLabel: true,
      borderColor: "#1F63A3",
    },
    series: [
      {
        data: yData,
        type: "line",
        symbol: "circle",
        symbolSize: [8, 8],
        name: "水位值（m）",
        color: "rgba(236,167,30,0.7)",
        markPoint: {
          data: [
            {
              name: "最大值",
              type: "max",
              valueDim: "y",
              symbol: "circle",
              symbolSize: [60, 26],
              symbolOffset: [0, -20],
              itemStyle: {
                color: "rgba(0,0,0,0)",
              },
              label: {
                color: "#FC9010",
                backgroundColor: "rgba(252,144,16,0.1)",
                borderRadius: 6,
                padding: [7, 14],
                borderWidth: 0.5,
                borderColor: "rgba(252,144,16,.5)",
                formatter: "水位最高值（m）：{c}",
              },
            },
          ],
        },
      },
    ],
  };
  this.$refs.charts.echartsInstance.setOption(this.option, true); // 更新图表
},
    // init(xData, yData) {
    //   this.option = {
    //     xAxis: {
    //       type: "category",
    //       data: xData,
    //       name: "heng",
    //       boundaryGap: true, //
    //       splitLine: {
    //         show: true,
    //         lineStyle: {//分隔线样式设置
    //           color: "rgba(31,99,163,.2)",
    //         },
    //       },
    //       axisLine: {//坐标轴先样式设置
    //         // show:false,
    //         lineStyle: {
    //           color: "rgba(31,99,163,.1)",
    //         },
    //       },
    //       axisLabel: {//坐标轴刻度标签
    //         interval: 0, // 显示所有标签
    //         rotate: 45, // 标签旋转45度
    //         color: "#7EB7FD",
    //         fontWeight: "500",
    //       },
    //     },
    //     yAxis: {
    //       min: 0, // Y轴的最小值
    //       // max: 120 ,// Y轴的最大值
    //       max: Math.ceil(Math.max(...yData) * 1.1),  // 以最大值为基准，稍微增加一些上限
    //       type: "value",
    //       name: "水位（m）",
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(31,99,163,.2)",
    //         },
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: "rgba(31,99,163,.1)",
    //         },
    //       },
    //       axisLabel: {
    //         color: "#7EB7FD",
    //         fontWeight: "500",
    //       },
    //     },
    //     //提示框配置项
    //     tooltip: {
    //       trigger: "axis",
    //       backgroundColor: "rgba(0,0,0,.6)",
    //       borderColor: "rgba(147, 235, 248, .8)",
    //       textStyle: {
    //         color: "#FFF",
    //       },
    //     },
    //     //布局
    //     grid: {
    //       show: true,
    //       left: "10px",
    //       right: "30px",
    //       bottom: "10px",
    //       top: "28px",
    //       containLabel: true,
    //       borderColor: "#1F63A3",
    //     },
    //     series: [
    //       {
    //         data: yData,
    //         type: "line",
    //         // smooth: true,//表示使用平滑曲线
    //         // symbol: "none", //曲线上的标记点，none表示不显示标记点
    //         symbol: "circle",
    //         symbolSize: [8, 8],
    //         name: "水位值（m）",
    //         // color: "rgba(252,144,16,.7)",
    //         color: "rgba(236,167,30,0.7)",
    //         markPoint: {
    //           data: [
    //             {
    //               name: "最大值",
    //               type: "max",
    //               valueDim: "y",
    //               symbol: "circle",//rect表示矩形 circle表示圆形
    //               symbolSize: [60, 26],
    //               symbolOffset: [0, -20],
    //               itemStyle: {
    //                 color: "rgba(0,0,0,0)",
    //               },
    //               label: {
    //                 color: "#FC9010",
    //                 backgroundColor: "rgba(252,144,16,0.1)",
    //                 borderRadius: 6,
    //                 padding: [7, 14],
    //                 borderWidth: 0.5,
    //                 borderColor: "rgba(252,144,16,.5)",
    //                 formatter: "水位最高值（m）：{c}",
    //               },
    //             },
    //           ],
    //         },
    //       },
    //     ],
    //   };
    //   this.$refs.charts.echartsInstance.setOption(this.option, true); // 更新图表
    //   // if (this.showChart) {
    //   //   this.option.series.push({
    //   //     // 折线图配置项
    //   //   });
    //   // }
    // },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;

}
</style>